<template>
    <AppTitle title="个人中心"></AppTitle>
    <div class="personalCenterBox">
        <div class="personalCenterItemBox">管理员ID:{{userInfo.id}}</div><hr/>
        <div class="personalCenterItemBox">账号:{{userInfo.account}}</div><hr/>
        <div class="personalCenterItemBox">用户组:{{userInfo.userGroup}}</div><hr/>
        <div class="personalCenterItemBox">创建时间:{{userInfo.ctime}}</div><hr/>
        <div class="personalCenterItemBox">
            管理员头像:
            <br>
            <el-upload
                class="avatar-uploader"
                :action="'/api/users/avatar_upload?id='+userInfo.id"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
            >
                <img v-if="imageUrl" :src="baseURL+imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
        </div>
    </div>
</template>

<script setup>
    import AppTitle from '@/components/title/AppTitle.vue';
    import { baseURL } from '@/utils/common.js';
    import { Plus } from '@element-plus/icons-vue'
    import { useUserStore } from '@/store/modules/user';
    import { reactive } from 'vue';
    import { ElMessage } from 'element-plus';
    import { ref } from 'vue';
    const userStore = useUserStore();
    const userInfo = reactive(userStore.userInfo);


    const imageUrl = ref('');
    imageUrl.value = userStore.userInfo.imgUrl;
    
    const beforeAvatarUpload = (rawFile) => {
        if (rawFile.type !== 'image/jpeg') {
            ElMessage.error('请上传图片');
            return false;
        } else if (rawFile.size / 1024 / 1024 > 10) {
            ElMessage.error('图片大小不能超过 10MB!');
            return false;
        }
        return true;
    };
    const handleAvatarSuccess = (response, uploadFile) => {
        userStore.setUserimgUrl(response.imgUrl);
        imageUrl.value = response.imgUrl;
        ElMessage.success('头像上传成功');
    };

</script>

<style lang="scss" scoped>
    .personalCenterBox{
        width: 100%;
        padding-top: 20px;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    .accountImg{
        width: 100px;
        height: 100px;
    }
    .avatar{
        width: 100px;
        height: 100px;

    }
</style>